import React, {useEffect, useState} from 'react';
import {Form, Modal} from "antd";
import ProForm, {ProFormSelect} from '@ant-design/pro-form';
import {getUserGroup} from "@/services/ant-design-pro/users";

const BatchGroup = (props) => {
  const {isBatch,batchCancel,handleOk} = props;
  const [isShowBatch,setIsShowBatch] = useState([])
  const [form] = Form.useForm();

  // 获取用户分组的列表
  useEffect(async ()=>{

    const batch = await getUserGroup();

    let batchList = batch.data.map(item=>{
      return {
        label:item.nickname,
        value:item.id
      }
    })
    setIsShowBatch(batchList)
  },[])

  return (
    <div>
      <Modal
        title='请选择用户分组'
        visible={isBatch}
        destroyOnClose={true}
        onOk={()=>{
          form.validateFields().then(async values=>{
            handleOk(values)
          })
        }}
        onCancel={batchCancel}
      >

        <ProForm
          form={form}
          submitter={false}
        >
          <ProFormSelect
            name="group_id"
            label="用户分组"
            options={isShowBatch}
            placeholder="请选择用户分组"
            rules={[{ required: true, message: '请选择用户分组!' }]}
          />

        </ProForm>

      </Modal>
    </div>
  );
};

export default BatchGroup;
